<template>
	<view class="nine-box">
		<view class="ss-raffle-9box" id="ss-raffle-9box">
			<!-- 'backgroundColor':styleBg.backgroundColor,
			'border':styleBg.border,
			'borderRadius':styleBg.borderRadius -->
			<view class="table" :style="{
			'margin':styleBg.margin,
			
		}">
				<view class="tr" v-for="(row,ri) in table" :key="ri">
					<block v-for="(col,ci) in row" :key="ci">
						<view class="td" @click.stop="handleClick(col.style.ss_id)">
							<view class="b-flex" :style="{
							'width':'192rpx',
							'height':'192rpx',
							'background-size':'100% 100%',
							'background-position':'center',
							'background-image':'url('+col.style.bgImg+')',
							'textAlign':col.style.textAlign,
							'opacity':col.style.opacity,
							'color':col.style.color,
							'borderColor':col.style.borderColor,
							'backgroundColor':col.style.backgroundColor,
							'borderRadius':col.style.borderRadius,
						}">
								<block v-if="col.good.image">
									<image class="img" :src="col.good.image" mode="aspectFit"></image>
								</block>
								<block v-if="col.good.giftName">
									<view class="title">
										<!-- {{col.good.giftName}} -->
									</view>
								</block>
								<!-- <block v-else>
									<view class="title">
										&nbsp;
									</view>
								</block> -->
							</view>
						</view>
					</block>
				</view>
			</view>
			<view class="center" @click.stop="handleStart" :style="{
			'width':styleCenterLogo.width,
			'height':styleCenterLogo.height,
			'left':styleCenterLogo.left,
			'top':styleCenterLogo.top,}">
				<view class="center-logo" :style="{
				'padding':'0',
				'height':styleCenter.height || '-webkit-fill-available',
				color:styleCenter.color || '#fff',
				textAlign:styleCenter.textAlign || 'center',
				background:styleCenter.background||'transparent',
				backgroundSize:styleCenter.backgroundSize || '80%',
				backgroundRepeat:'no-repeat',
				backgroundPosition:'center',
			}">
					<!-- {{centerText}} -->
					<image src="http://assets.shinshen.com/static/draw/2-2.png" class="nine-box-start" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "ss-raffle-9box",
		props: {
			rows: {
				type: Number,
				default: 3
			},
			cols: {
				type: Number,
				default: 3
			},
			centerText: {
				type: String,
				default: ''
			},
			styleCenter: {
				type: Object,
				default: () => {
					return {
						padding: '20px',
						height: '-webkit-fill-available'
					}
				}
			},
			styleGrid: {
				type: Object,
				default: () => {
					return {
						textAlign: 'center',
						color: '#fff',
						borderColor: '#faa',
						backgroundColor: '#F7D892',
						borderRadius: '5px',
						opacity: 0.8
					};
				}
			},
			styleActive: {
				type: Object,
				default: () => {
					return {
						textAlign: 'center',
						color: '#000',
						borderColor: 'transparent',
						backgroundColor: '#F7D892',
						opacity: 1
					}
				}
			},
			styleBg: {
				type: Object,
				default: () => {
					return {
						margin: 'auto',
						border: '2rpx solid #f50',
						backgroundColor: '#f50',
						borderRadius: '10rpx'
					}
				}
			},
			goods: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				_rows: 3,
				_cols: 3,
				table: [],
				_styleGrid: {
					width: 'auto',
					height: 'auto',
				},
				grids: [],
				activeIndex: 0,
				animing: false,
				height: '477rpx',
				styleCenterLogo: {}
			};
		},
		mounted() {
			uni.createSelectorQuery().in(this).select('#ss-raffle-9box').boundingClientRect(res => {
				// if (res.width < 30) throw new Error('component width <= 30');
				const PX = 'px';
				const {
					styleActive,
					goods
				} = this;
				let {
					rows,
					cols
				} = this;
				const {
					_styleGrid: styleGrid
				} = this.$data;
				Object.assign(styleGrid, this.styleGrid);
				cols = Math.max(cols, 3);
				rows = Math.max(rows, 3);
				const borderW = 4;
				const size = Math.trunc(res.width / cols);
				styleGrid.width = size + PX;
				styleGrid.height = size + PX;
				styleGrid.borderWidth = borderW + PX;
				// this.height = rows * (size + borderW) + PX;
				Object.assign(this.styleCenterLogo, {
					width: size * (cols - 2) + borderW - 4 + PX,
					height: size * (rows - 2) + borderW - 4 + PX,
					left: size + borderW - 2 + PX,
					top: size + borderW - 2 + PX,
				});

				let list = [];
				let grids = [];
				let grids2 = [];
				let grids3 = [];
				let grids4 = [];
				for (let r = 1; r <= rows; r++) {
					let row = [];
					for (let c = 1; c <= cols; c++) {
						let ss_id = `${r}-${c}`
						let grid = {
							style: Object.assign({}, styleGrid, {
								opacity: ss_id == '2-2' ? 1 : styleGrid.opacity
							}),
							good: {}
						};
						grid.style.ss_id = `${r}-${c}`
						grid.style.bgImg = ``
						if (r == 1) grids.push(grid);
						else if (r == rows) grids3.push(grid);
						else if (c == 1) grids4.push(grid);
						else if (c == cols) grids2.push(grid);
						else {
							grid.style.backgroundColor = 'transparent';
						}
						row.push(grid);
					}
					list.push(row);
				}
				this.table = list;
				grids = grids.concat(grids2.reverse(), grids3.reverse(), grids4.reverse());
				grids.forEach((g, i) => {
					if (i < goods.length) Object.assign(grids[i].good, goods[i]);
					else grids[i].good.title = i + '.';
				});
				this.grids = grids;
			}).exec()
		},
		methods: {
			handleClick(id) {
				if (id == '2-2') {
					this.$emit('start')
				}
			},
			handleStart() {
				this.$emit('start')
			},
			onStart(conf) {
				console.log(conf)
				if (typeof conf.success != 'function') throw new Error('success is undefined');
				if (this.animing) return;
				this.animing = true;
				conf = Object.assign({
					index: -1,
					rotationNum: 3,
					speedMull: 1.5,
					speedMax: 10,
					speedMin: 2000,
				}, conf);
				const {
					grids,
					activeIndex,
					styleGrid,
					styleActive
				} = this;
				if (conf.index < 0 || conf.index >= grids.length) {
					conf.index = Math.trunc(Math.random() * grids.length);
				}
				let index = 0;
				let time = conf.speedMax;
				let rotationNum = 0;
				while (time < conf.speedMin) {
					time *= conf.speedMull;
					index++;
				}
				let index2 = conf.index - (index % grids.length) + 1;
				index = activeIndex;
				time = conf.speedMax;
				if (index2 < 0) index2 = grids.length + index2;
				const activating = (timeout) => {
					setTimeout(() => {
						let prei = index - 1 >= 0 ? index - 1 : grids.length - 1;
						let g = grids[index];

						grids.forEach(g => {
							g.style.bgImg = ''
						})

						let cIndex = index <= 3 ? index + 1 : index + 2
						let r = Math.ceil(cIndex / 3)
						let ss_id = `${r}-${cIndex%3==0?3:cIndex%3}`
						// console.log(ss_id, index, prei, cIndex)
						grids[index].style.bgImg =
							`http://assets.shinshen.com/static/draw/${ss_id}.png`

						Object.assign(grids[prei].style, styleGrid);
						Object.assign(g.style, styleActive);
						if (rotationNum > conf.rotationNum) time *= conf.speedMull;
						if (time < conf.speedMin) {
							index++;
							if (index >= grids.length) index = 0;
							if (index == index2) rotationNum++;
							this.$nextTick(() => activating(time));
							return;
						}
						this.activeIndex = index;

						this.animing = false;
						setTimeout(() => {
							conf.success({
								index,
								grids: grids.map(g => g.good),
								good: grids[index]['good']
							})
						}, 100)
					}, timeout)
				};
				activating();
			}
		}
	}
</script>

<style lang="scss">
	.nine-box {
		width: 600rpx;
		height: 600rpx;
		background-size: 100% 100%;
		border-radius: 10px;
		background-color: #A74729;
		background-position: center;
		padding-top: 5px;
		margin: 0 auto;
		margin-top:260rpx;
		position: relative;
		z-index: 3;

		.ss-raffle-9box {
			// padding: 2rpx;
			border-radius: 10rpx;
			width: 580rpx;
			height: 600rpx;
			position: absolute;
			// bottom: 36rpx;
			overflow: hidden;
			box-sizing: border-box;
			left: 0;
			right: 0;
			margin: 0 auto;

			.center,
			.table {
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
			}

			.center {
				.center-logo {
					background-color: #faa;
					display: flex;
					align-items: center;

					.nine-box-start {
						margin: 5rpx 0 0 5rpx;
						width: 190rpx;
						height: 195rpx;
					}
				}
			}

			.table {
				display: inline-table;

				.tr {
					display: table-row;

					.td {
						display: table-cell;
						vertical-align: middle;
						border: 2rpx solid transparent;

						.b-flex {
							display: flex;
							align-items: center;
							justify-content: center;
							flex-direction: column;
							.img {
								display: inline-block;
								width: 150rpx;
								height: 150rpx;
								margin-top: 8%;
							}

							.title {
								display: inline-block;
								// padding-top: 34%;
								text-overflow: ellipsis;
								white-space: nowrap;
								overflow: hidden;
								font-size: 20rpx;
								font-weight: bold;
								color: #FFFFFF;
							}
						}
					}
				}
			}
		}
	}
</style>